<template>
    <div class="w_100 mb20">
        <ElInput
            v-model="keyValue"
            size="small"
            class="w300"
            placeholder="关键字搜索"
            @change="initTable"
            @input="initTable"
            :prefix-icon="Search"
        />
        <UserBar />
    </div>
    <MessageBar></MessageBar>
    <div class="w_100 mt20 pb20 table_box pt20 pl10 pr10">
        <ElTable :data="tableData" class="pl10 pr10">
            <ElTableColumn label="订单编号" width="200">
                <template #default="scope">
                    <ElButton type="text" size="small" @click="handleClick(scope.row)">
                        <span :title="scope.row.orderNumber" class="orderNumber">{{ scope.row.orderNumber }}</span>
                    </ElButton>
                </template>
            </ElTableColumn>
            <ElTableColumn label="图片描述">
                <img style="width: 50px" :src="thumbnail" />
            </ElTableColumn>
            <ElTableColumn label="名称">
                <template #default="scope">
                    <ElButton type="text" size="small" @click="handleClick(scope.row)">
                        <span :title="scope.row.serviceDetail.serviceName" class="orderName">{{ scope.row.serviceDetail.serviceName }}</span>
                    </ElButton>
                </template>
            </ElTableColumn>
            <ElTableColumn prop="payment" label="价格" />
            <ElTableColumn label="规格类型">
                <template #default="scope">
                    <span
                        v-for="(spec, index) in scope.row.serviceDetail.specifications"
                        class="font-12-3ab0a2 specifications-box m-r-5"
                        :key="index"
                    >
                        {{ spec.optionName }}
                    </span>
                </template>
            </ElTableColumn>
            <ElTableColumn prop="customerName" label="用户" />
            <ElTableColumn prop="serverName" label="服务人员" />
            <ElTableColumn prop="appointmentTime" width="100" label="服务时间" />
            <ElTableColumn label="状态">
                <template #default="scope">
                    <span v-if="scope.row.status === 1">待接单</span>
                    <span v-else-if="scope.row.status === 2">已完成</span>
                    <span v-else-if="scope.row.status === 3">已取消</span>
                    <span v-else-if="scope.row.status === 4">已接单</span>
                    <span v-else>未知状态</span>
                </template>
            </ElTableColumn>
        </ElTable>
        <ElPagination
            class="mt20 ml20"
            @current-change="handleCurrentChange"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="totals"
        ></ElPagination>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

import UserBar from '@/components/UserBar.vue';
import { Search } from '@element-plus/icons-vue';
import { formatDateBeiJing } from '@/utils/utils';
import MessageBar from '@/components/MessageBar.vue';
import { getTenantOrders } from '../../api/api.query.util';

const thumbnail = require('@/assets/image/taylor-sondgeroth-ltsKOg_q_Gc-unsplash@2x.png');

const router = useRouter();

const keyValue = ref('');
const tableData = ref([]);
const currentPage = ref(1);
const totals = ref(0);
initTable();
function handleClick(row: any) {
    router.push({ name: '/home/orders-management/Details', query: { orderNumber: row.orderNumber } });
}
function initTable() {
    getTenantOrders({
        method: 'post',
        data: {
            current: currentPage.value,
            size: 10,
            serviceName: keyValue.value,
            status: '',
        },
    }).then((res) => {
        tableData.value = res.result.records;
        totals.value = res.result.total;
        // tableData.value.forEach((item) => {
        //     item.appointmentTime = formatDateBeiJing(item.appointmentTime, 'MM-dd hh:mm', 'UCT');
        // });
    });
}
function initPage() {
    keyValue.value = '';
    currentPage.value = 1;
}
function handleCurrentChange(current) {
    keyValue.value = '';
    currentPage.value = current;
    initTable();
}
</script>

<style scoped>
.font-12-3ab0a2 {
    color: #3ab0a2;
    font-size: 12px;
}
.specifications-box {
    display: inline-block;
    order-radius: 4px;
    border: solid 1px #3ab0a2;
    line-height: 14px;
    padding: 0 6px;
}
.m-r-5 {
    margin-right: 5px;
}
.orderNumber, .orderName {
    display: inline-block;
    max-width: 138px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
